<template>
  <div class="box">
    <!-- 职位类别区 -->
    <div class="top">
      <!-- 版本选择 -->

      <div class="top-left">
        <router-link to="/job/pickcity" tag="li">广州</router-link>
        <router-link to="/job/pickwork" tag="li">IT</router-link>
      </div>
      <div class="top-right">
        <li>学生版 ></li>
      </div>
    </div>
    <!-- 招聘列表 -->
    <div class="joblist">
      <div v-for="item in joblist" v-bind:key="item.id" class="item">
        <div class="name">{{item.name}}</div>
        <div class="company">{{item.company}}</div>
        <div class="money">{{item.money}}</div>
        <div class="condition">
          <ul>
            <li>{{item.city}}</li>
            <li>{{item.education}}</li>
            <li>{{item.workinglife}}</li>
          </ul>
        </div>
        <div class="people">{{item.interviewer}}</div>
      </div>
    </div>

    <router-view class="pick"></router-view>
  </div>
</template>

<script>
import "animate.css";
import province from "../data/province.json";
import city from "../data/city.json";

export default {
  data() {
    return {
      joblist: [
        {
          name: "后端实习生",
          company: "同乐科技 未融资",
          money: "4-6k",

          city: "广州",
          education: "本科",
          workinglife: "2年",
          interviewer: "陈女士"
        },
        {
          name: "前端实习生",
          company: "同乐科技 未融资",
          money: "4-6k",

          city: "广州",
          education: "本科",
          workinglife: "2年",
          interviewer: "徐先生"
        },
        {
          name: "数据库实习生",
          company: "同乐科技 未融资",
          money: "4-5k",

          city: "广州",
          education: "本科",
          workinglife: "2年",
          interviewer: "王先生"
        },
        {
          name: "后端实习生",
          company: "同乐科技 未融资",
          money: "4-6k",

          city: "广州",
          education: "本科",
          workinglife: "2年",
          interviewer: "陈女士"
        },
        {
          name: "后端实习生",
          company: "同乐科技 未融资",
          money: "4-6k",

          city: "广州",
          education: "本科",
          workinglife: "2年",
          interviewer: "陈女士"
        },
        {
          name: "后端实习生",
          company: "同乐科技 未融资",
          money: "4-6k",

          city: "广州",
          education: "本科",
          workinglife: "2年",
          interviewer: "陈女士"
        }
      ]
    };
  },
  created() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
ul,
li,
input {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  float: left;
}
.box {
  position: relative;
  width: 100vw;
  height: 90vh;
  .top {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 10vh;
    background: #00d7c6;
    z-index: 10;
    .top-left {
      position: absolute;
      left: 0;
      width: 50vw;
      height: 10vh;
      li {
        position: relative;
        left: 10%;
        margin-right: 20%;
        top: 50%;
        margin-top: -20px;
        color: white;
        font-size: 30px;
      }
    }
    .top-right {
      position: absolute;
      right: 0;
      width: 50vw;
      height: 10vh;
      li {
        position: absolute;
        right: 10%;
        top: 50%;
        margin-top: -15px;
        color: white;
        font-size: 20px;
      }
    }
  }
  .joblist {
    position: relative;
    top: 10vh;
    display: inline-block;
    width: 100vh;
    background: #eeeeee;
    .item {
      position: relative;
      background: #ffffff;
      height: 25vh;
      margin-bottom: 5px;
      .name {
        position: absolute;
        top: 5%;
        left: 5%;
        font-size: 20px;
        font-weight: 600;
      }
      .company {
        position: absolute;
        top: 25%;
        left: 5%;
      }
      .money {
        position: absolute;
        right: 5%;
        top: 5%;
        color: #00d7c6;
      }
      .condition {
        position: absolute;
        top: 45%;
        left: 5%;
        font-size: 14px;
        ul {
          display: flex;
          -webkit-justify-content: space-around;
          justify-content: space-around;

          li {
            margin-right: 5px;
            padding: 5px;
            background: #eeeeee;
          }
        }
      }
      .people {
        position: absolute;
        bottom: 5%;
        left: 5%;
      }
    }
  }
  .pick {
    position: absolute;
    top: 10vh;
    width: 100vh;
    display: inline-block;
    background: #00d7c6;
  }
}
</style>
